<template>
  <div class="sider-main">
    <cascader
      :fill="fill"
      :cover="$imgUrl + 'lcd-icon-home-emtry.png'"
      :defaultSelect="defaultSelect"
      :options="options"
      :field-names="fieldNames"
      :loading="loading"
      ref="Cascader"
      @handleColseOpen="handleColseOpen"
    >
      <template #opearte>
        <div v-if="false" class="sider-main-opearte">
          <div class="sider-main-opearte-content">
            <img :src="$imgUrl + '/lcd-icon-edit-opearte.png'" :alt="$imgUrl + 'lcd-icon-edit-opearte.png'">
            <span>操作手册</span>
          </div>
        </div>
      </template>
    </cascader>
  </div>
</template>

<script>
import { Cascader } from 'vue-lcd-engine'

import { APIGetEditorComponent } from '@/api/editor.js';

import side from '@/mixins/sider';

import vars from '@/styles/vars.less';

console.log('vars', vars);

export default {
  name: 'SiderMain',
  mixins: [
    side
  ],
  components: {
    Cascader
  },
  data () {
    return {
      defaultSelect: [],
      singleCol: ['editor-background', 'editor-center'],
      imageKey: ['', 'editor-component', 'editor-float', 'editor-panel', 'editor-center', 'editor-background'],
      imageIndex: {
        'editor-float': 4,
        'editor-panel': 3,
        'editor-center': 2,
        'editor-background': 1
      },
      fieldNames: {
        children: 'childMenuList',
        label: 'label'
      },
      options: [],
      loading: false,
      index: 0,
      zIndex: 0,
      fill: vars.primary_color
    }
  },
  mounted () {
    this.initCascader()
  },
  methods: {
    handleColseOpen (e) {
      this.handleLayout([e, this.layout[1]])
    },
    initCascader () {
      // this.loading = true
      APIGetEditorComponent().then(res => {
        if (res.success && res.data) {
          const menuList = res.data.menuList || []
          this.options = this.initOption(menuList)
        } else {
          this.options = []
        }
        // this.loading = false
      }).then(() => {
        this.defaultSelect = ['组件', '背景组件']
      }).catch(() => {
        this.options = []
        // this.loading = false
      })
    },
    initOption (data) {
      // 后续增加组件key的匹配
      this.index++
      return data.map(e => {
        const image = this.imageKey[e.menuId] || ''
        if (this.imageIndex[image]) {
          this.zIndex = this.imageIndex[image] || 0
        }
        return {
          ...e,
          icon: `${image ? image + '_normal' : ''}`,
          iconHover: `${image ? image + '_selected' : ''}`,
          layout: this.singleCol.includes(image) ? 'single-row' : null,
          label: e.menuName,
          key: e.key,
          childMenuList: e.childMenuList ? this.initOption(e.childMenuList) : null,
          zIndex: this.zIndex
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.sider-main {
  height: 100%;
  .sider-main-opearte {
    position: absolute;
    width: 100%;
    bottom: 63px;
    cursor: pointer;
    &-content {
      width: 100%;
      display: flex;
      padding: 0 5px;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      img {
        display: inline-block;
        width: 28px;
        height: 28px;
        object-fit: fill;
      }
    }
  }
}
</style>
